import ProSwitchButton from '@/components/pro-switch-button/index.vue'
import { ProFormOptions } from '@/components/pro-form/type'
import { DictModel } from '@/api/model/dictModel'

export const useDictProForm = () => {
  const [dictForm, resetDictForm] = useProRef<Partial<DictModel>>({
    validFlag: true
  })
  const dictFormOptions = computed<ProFormOptions>(() => [
    {
      grid: {
        cols: '1'
      },
      columnItemList: [
        {
          formItem: {
            formType: 'input',
            key: 'name',
            label: '字典名称',
            rule: {
              required: true,
              message: '请输入字典名称',
              trigger: ['input']
            },
            placeholder: '请输入字典名称'
          }
        },
        {
          formItem: {
            formType: 'input',
            label: '字典标识',
            key: 'type',
            rule: {
              required: true,
              message: '请输入字典标识',
              trigger: ['input']
            },
            placeholder: '请输入字典标识'
          }
        },
        {
          formItem: {
            formType: 'custom',
            key: 'validFlag',
            label: '状态',
            render() {
              return (
                <ProSwitchButton
                  v-model:value={dictForm.value.validFlag}
                  checkedText="正常"
                  uncheckedText="停用"
                />
              )
            }
          }
        },
        {
          formItem: {
            formType: 'textarea',
            label: '备注',
            key: 'remark',
            placeholder: '请输入备注'
          }
        }
      ]
    }
  ])

  return {
    dictForm,
    dictFormOptions,
    resetDictForm
  }
}
